<template>
  <el-dialog
    :title="!dataForm.dishId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
    >
      <el-form-item label="菜品名字" prop="dishName">
        <el-input v-model="dataForm.dishName" placeholder="菜品名字"></el-input>
      </el-form-item>
      <el-form-item label="菜品价格" prop="dishPrice">
        <el-input
          v-model="dataForm.dishPrice"
          placeholder="菜品价格"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜品类型（八大菜系）" prop="dishCate">
        <!-- <el-input
          v-model="dataForm.dishCate"
          placeholder="菜品类型（八大菜系）"
        ></el-input> -->
        <template>
          <el-select v-model="dataForm.dishCate" placeholder="菜品类型（八大菜系）">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="菜品适宜人群" prop="suitableUser">
        <el-input
          v-model="dataForm.suitableUser"
          placeholder="菜品适宜人群"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜品标签（特色说明）" prop="dishFeature">
        <el-input
          v-model="dataForm.dishFeature"
          placeholder="菜品标签（特色说明）"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜品材料" prop="dishMaterial">
        <el-input
          v-model="dataForm.dishMaterial"
          placeholder="菜品材料"
        ></el-input>
      </el-form-item>
      <el-form-item label="工艺（炖、蒸、炸）" prop="menuCraft">
        <el-input
          v-model="dataForm.menuCraft"
          placeholder="工艺（炖、蒸、炸）"
        ></el-input>
      </el-form-item>
      <el-form-item label="口味（酱香味、麻辣味等）" prop="menuTaste">
        <el-input
          v-model="dataForm.menuTaste"
          placeholder="口味（酱香味、麻辣味等）"
        ></el-input>
      </el-form-item>
      <el-form-item label="制作所需时间(单位是 min)" prop="menuTime">
        <el-input
          v-model="dataForm.menuTime"
          placeholder="制作所需时间(单位是 min)"
        ></el-input>
      </el-form-item>
      <el-form-item label="主料" prop="mainIngredient">
        <el-input
          v-model="dataForm.mainIngredient"
          placeholder="主料"
        ></el-input>
      </el-form-item>
      <el-form-item label="辅料" prop="minorIngredient">
        <el-input
          v-model="dataForm.minorIngredient"
          placeholder="辅料"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜品图片展示" prop="imageUrl">
        <el-input
          v-model="dataForm.imageUrl"
          placeholder="菜品图片展示"
        ></el-input>
      </el-form-item>
      <el-form-item label="菜品图片展示2" prop="imageUrl2">
        <el-input
          v-model="dataForm.imageUrl2"
          placeholder="菜品图片展示2"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      options: [{
          value: '粤菜',
          label: '粤菜'
        }, {
          value: '川菜',
          label: '川菜'
        }, {
          value: '鲁菜',
          label: '鲁菜'
        }, {
          value: '苏菜',
          label: '苏菜'
        }, {
          value: '浙菜',
          label: '浙菜'
        }, {
          value: '闽菜',
          label: '闽菜'
        }, {
          value: '湘菜',
          label: '湘菜'
        }, {
          value: '徽菜',
          label: '徽菜'
        }],

      dataForm: {
        dishId: 0,
        dishName: "",
        dishPrice: "",
        dishCate: "",
        suitableUser: "",
        dishFeature: "",
        dishMaterial: "",
        menuCraft: "",
        menuTaste: "",
        menuTime: "",
        mainIngredient: "",
        minorIngredient: "",
        imageUrl: "",
        imageUrl2: ""
      },
      dataRule: {
        dishName: [
          { required: true, message: "菜品名字不能为空", trigger: "blur" }
        ],
        dishPrice: [
          { required: true, message: "菜品价格不能为空", trigger: "blur" }
        ],
        dishCate: [
          {
            required: true,
            message: "菜品类型（八大菜系）不能为空",
            trigger: "blur"
          }
        ],
        suitableUser: [
          { required: true, message: "菜品适宜人群不能为空", trigger: "blur" }
        ],
        dishFeature: [
          {
            required: true,
            message: "菜品标签（特色说明）不能为空",
            trigger: "blur"
          }
        ],
        dishMaterial: [
          { required: true, message: "菜品材料不能为空", trigger: "blur" }
        ],
        menuCraft: [
          {
            required: true,
            message: "工艺（炖、蒸、炸）不能为空",
            trigger: "blur"
          }
        ],
        menuTaste: [
          {
            required: true,
            message: "口味（酱香味、麻辣味等）不能为空",
            trigger: "blur"
          }
        ],
        menuTime: [
          {
            required: true,
            message: "制作所需时间(单位是 min)不能为空",
            trigger: "blur"
          }
        ],
        mainIngredient: [
          { required: true, message: "主料不能为空", trigger: "blur" }
        ],
        minorIngredient: [
          { required: true, message: "辅料不能为空", trigger: "blur" }
        ],
        imageUrl: [
          { required: true, message: "菜品图片展示不能为空", trigger: "blur" }
        ],
        imageUrl2: [
          { required: true, message: "菜品图片展示2不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    init(id) {
      this.dataForm.dishId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.dishId) {
          this.$http({
            url: this.$http.adornUrl(`/menu/dish/info/${this.dataForm.dishId}`),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.dishName = data.dish.dishName;
              this.dataForm.dishPrice = data.dish.dishPrice;
              this.dataForm.dishCate = data.dish.dishCate;
              this.dataForm.suitableUser = data.dish.suitableUser;
              this.dataForm.dishFeature = data.dish.dishFeature;
              this.dataForm.dishMaterial = data.dish.dishMaterial;
              this.dataForm.menuCraft = data.dish.menuCraft;
              this.dataForm.menuTaste = data.dish.menuTaste;
              this.dataForm.menuTime = data.dish.menuTime;
              this.dataForm.mainIngredient = data.dish.mainIngredient;
              this.dataForm.minorIngredient = data.dish.minorIngredient;
              this.dataForm.imageUrl = data.dish.imageUrl;
              this.dataForm.imageUrl2 = data.dish.imageUrl2;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/menu/dish/${!this.dataForm.dishId ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              dishId: this.dataForm.dishId || undefined,
              dishName: this.dataForm.dishName,
              dishPrice: this.dataForm.dishPrice,
              dishCate: this.dataForm.dishCate,
              suitableUser: this.dataForm.suitableUser,
              dishFeature: this.dataForm.dishFeature,
              dishMaterial: this.dataForm.dishMaterial,
              menuCraft: this.dataForm.menuCraft,
              menuTaste: this.dataForm.menuTaste,
              menuTime: this.dataForm.menuTime,
              mainIngredient: this.dataForm.mainIngredient,
              minorIngredient: this.dataForm.minorIngredient,
              imageUrl: this.dataForm.imageUrl,
              imageUrl2: this.dataForm.imageUrl2
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
